<template>
	<div class="echarts-box">
		<movieCharts class="echarts-box-item"></movieCharts>
		<userCharts class="echarts-box-item"></userCharts>
		<commentCharts class="echarts-box-item"></commentCharts>
		<websiteCharts class="echarts-box-item"></websiteCharts>
		<movieClickCharts class="echarts-box-item"></movieClickCharts>
	</div>
</template>

<script setup>
import movieCharts from '../../components/charts/movieCharts.vue'
import userCharts from '../../components/charts/userCharts.vue'
import commentCharts from '../../components/charts/commentCharts.vue'
import websiteCharts from '../../components/charts/websiteCharts.vue'
import movieClickCharts from '../../components/charts/movieClickCharts.vue'
</script>

<style lang="scss" scoped>
.echarts-box {
 	display: flex;
 	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
 	width: 100%;
 	.echarts-box-item {
		flex: 50%;
		flex-shrink: 0;
		min-width: 0;
 	}
 }
</style>